<template>
  <view class="fu-waterfall">
    <!-- 左列 -->
    <view 
      class="fu-waterfall__column"
      :style="{ marginRight: `${columnGap}rpx` }"
    >
      <slot name="left"></slot>
    </view>
    
    <!-- 右列 -->
    <view class="fu-waterfall__column">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-waterfall 瀑布流组件
 * @description 用于展示瀑布流布局内容
 * @property {Number} columnGap - 列间距
 */
export default {
  name: 'fu-waterfall',
  props: {
    columnGap: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      columns: {
        left: { height: 0, items: [] },
        right: { height: 0, items: [] }
      }
    }
  },
  methods: {
    // 获取较短的列
    getShorterColumn() {
      return this.columns.left.height <= this.columns.right.height ? 'left' : 'right'
    },
    // 更新列高度
    updateColumnHeight(column, height) {
      this.columns[column].height += height
    },
    // 添加项到列
    addItem(item) {
      const column = this.getShorterColumn()
      this.columns[column].items.push(item)
      return column
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-waterfall {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  
  &__column {
    flex: 1;
  }
}
</style> 